<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/pc端页面初始化.css">
    <link rel="stylesheet" href="./css/goodsdetails.css">
</head>

<body>
    <!-- 头部引入 -->
    <div class="head"></div>
    <!-- 商品详情信息 -->
    <div class="proinfo">

        <div class="goods-content">
            <div class="img-list">
                <!-- 大图 -->
                <div class="big-img">
                    <!-- <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200403/20200403160925_780.png" alt=""> -->
                </div>
                <!-- 大图  套上  遮罩 -->
                <div class="small-box">
                    <div id="mask">

                    </div>
                </div>


                <!-- 放大图 -->
                <div class="big-box">

                </div>

                <!-- 小图 -->
                <div class="small-img">
                    <!-- 按钮 -->
                    <button class="arrow arrow-left">
                        <i class="fa fa-angle-left"><</i>
                    </button>
                    <button class="arrow arrow-right">
                        <i fa fa-angle-right>></i>
                    </button>
                    <!-- 小图插入-->
                    <div class="listbox">
                        <ul class="animate-common animate-duration-ms">
                            <li>
                                <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731150913_720.jpg" alt="">
                            </li>
                            <li>
                                <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731150913_720.jpg" alt="">
                            </li>
                            <li>
                                <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731150913_720.jpg" alt="">
                            </li>
                            <li>
                                <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731150913_720.jpg" alt="">
                            </li>
                            <!-- <li>
                                <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731150913_720.jpg" alt="">
                            </li> -->
                        </ul>
                    </div>
                </div>
            </div>


            <!-- 商品信息 -->
            <div class="property-list">
                <div class="pro-name">
                    腾讯黑鲨游戏手机3S 12GB+128GB 天云黑 官方标配
                </div>
                <span class="pro-slogan">
                120Hz三星AMOLED屏、JOYUI12操作系统、下单立享12期免息
                </span>
                <div class="pro-price">
                    <span class="priceNow">
                    ￥3999.00
                </span>
                </div>
                <!-- 商品颜色选项 -->
                <div class="pro-choose">
                    <div class="attr">
                        <div class="pro-choose-item">
                            <div class="pro-choose-name">
                                版本
                            </div>
                            <div class="pro-choose-content" id="edition">
                                <div class="pro-choose-pill">12GB+128GB</div>
                                <div class="pro-choose-pill">12GB+256GB</div>
                            </div>
                        </div>
                        <!-- 颜色 -->
                        <div class="pro-choose-item">
                            <div class="pro-choose-name">
                                颜色
                            </div>
                            <div class="pro-choose-content" id="color">
                                <div class="pro-choose-pill">天云黑</div>
                                <div class="pro-choose-pill">水晶蓝</div>
                            </div>
                        </div>
                        <!-- 购买方式 -->
                        <div class="pro-choose-item">
                            <div class="pro-choose-name">
                                购买方式
                            </div>
                            <div class="pro-choose-content" id="buy">
                                <div class="pro-choose-pill">官方标配</div>
                                <div class="pro-choose-pill">官方标配</div>
                            </div>
                        </div>
                    </div>

                    <!-- 数量 -->
                    <div class="num">
                        <div class="pro-choose-item">
                            <div class="pro-choose-name">
                                数量
                            </div>
                            <div class="pro-choose-content">
                                <div class="sel-num">
                                    <button class="reduce-num">-</button>
                                    <i id="num">1</i>
                                    <button class="add-num">+</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>


                <!-- 购买 -->
                <div class="button-col">
                    <button class="btn btn-black" id="cart">加入购物车</button>
                    <button class="btn btn-green animate-duration-ms" id="pay">立即购买</button>
                </div>
            </div>
        </div>
        <!-- 尾部 -->
        <div class="foot"></div>

    </div>









</body>

</html>
<script src="./js/jquery-3.2.1.min.js"></script>
<script>
    $(function() {
        $(".head").load("import-header-copy.html")
    })
</script>
<script src="js/goodsdetails.js"></script>
<script>
    $(function() {
        $(".foot").load("import-foot.html")
    })
</script>